<template>
  <div>
      <div>

  显示消息：{{mes}}
  <el-input v-model='sendsms'></el-input>
  <el-button @click='send'>发送</el-button>

 <template >
    <el-table
      :data="list"   :cell-style="styleBack">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>

      <el-table-column
        prop="name"
        label="名称">

      </el-table-column>

      <el-table-column
        prop="wendu"
        label="温度">
      </el-table-column>

      <el-table-column
        prop="min"
        label="最小温度">
      </el-table-column>

      <el-table-column
        prop="max"
        label="最大温度">
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>


    
    </el-table >
  </template>








      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      mes:'',
      ws:'',
      sendsms:'',
      list:[]
    }
  },
  methods: {
    initWebsocket(){
      this.ws = new WebSocket("ws://localhost:8000/WebsockHandler/?id=1")
      this.ws.onopen=function(){
        alert("连接成功")
      }
// ===========================================
      this.ws.onmessage=((data)=>{
        this.mes=data.data
        this.list=JSON.parse(this.mes)
      })
// ===========================================
      this.ws.onclose=function(){
        alert("连接失败")
      }
    },
    send(){
      this.ws.send(this.sendsms)
    },
    styleBack({row}){
      if (row.status==1){

        return {backgroundColor:"red"}
      }
      if (row.status==2){

        return {backgroundColor:"blue"}
      }
      if (row.status==0){

        return {backgroundColor:"black"}
      }


    }
  },
  mounted() {
    this.initWebsocket()
    this.styleBack()
  },

}
</script>

<style>

</style>